<template>
	<div id="UserLogin">
	  <transition name="img">
		<div id="div_img"@click="openBox()" v-if="showImg">
			<img  style="width: 100%" src="../../../static/img/timg.png">
		</div>
	  </transition>
	 <transition name="buttom">
	 	<div v-if="showBox" class="div_apply" title='ApplyLaboratory'@click="openApply()">
	 		Apply
	 	</div>
	 </transition>
 	 <transition name="buttom">
	 <div v-if="showBox" class="div_apply" title="Login">
		  Login
	 </div>
	 </transition>
	  <transition name="buttom">
	 <div  v-if="showBox" class="div_apply" title="Feed">
		  Feed
		  </div>
	 </transition>
	 <Row>
	  <Col v-if="showForm"
			  id="div_box" offset="4" span="14" style="position: fixed;top: 120px;">
			   <Button id="buttom_close" @click="closeApply()">×</Button>
		 <div>
		 	<ApplyLaboratory @returnData="closeApply" style="margin-top: 40px;"></ApplyLaboratory>
		 </div>
	  </Col>
	 </Row>
	</div>
</template>
<script>
import ApplyLaboratory from '@/components/login/ApplyLaboratory'
export default {
  name: 'UserLogin',
  data () {
    return {
    	msg:"Welcome to the front lab",
    	count:0,
    	showImg:true,
    	showBox:false,
    	showForm:false,
    	flag:false,
    }
  },
  methods:
  {
  	openBox()
  	{
  		console.log(this.count);
	  if(this.count===0)
		{
			this.showBox=true;
		}
	  else
		{
			this.showBox=false;
			this.count=0;
			return;
		}
	  this.count++;
    },
    closeApply()
    {
       this.showForm=false;
       this.showImg=true;
       this.count=0;
    },
    openApply()
    {
    	this.showBox=false;
        this.showForm=true;
        this.showImg=false;
    },
  },
  components:{
  	ApplyLaboratory
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

@font-face {
	font-family: "Distillated";
	src: url("/../static/fontFamilies/Distillated/Distillated.woff2") format("woff2"),
	url("/../static/fontFamilies/Distillated/Distillated.woff") format("woff"),
	url("/../static/fontFamilies/Distillated/Distillated.ttf") format("truetype"),
	url("/../static/fontFamilies/Distillated/Distillated.eot") format("embedded-opentype"),
	url("/../static/fontFamilies/Distillated/Distillated.svg") format("svg");
	font-weight: normal;
	font-style: normal;
}
.img-leave-active
{
	animation:fadeOutDown 1s;
}
.img-enter-active {
  animation: fadeInUp 1s;
}

.buttom-enter-active {
  animation: jackInTheBox 1s;
}
.buttom-leave-active
{
	animation:zoomOut 1s;
}
.Form-enter-active
{
	animation:fadeInDown 1s;
}
#buttom_close
{
	border: 0px;
	float: right;
	font-size: 3em;
	opacity: 0.7;
	line-height: 20px;
}
#buttom_close:hover
{
	color: #6BADC1;
	cursor:pointer;
	text-shadow: 1px 1px 1px #6BADC1;
}
div [title^="Apply"]
{
   bottom:21%;
   right:13%;
}
div [title^="Feed"]
{
	bottom:4%;
    right:14%;
}
.div_apply
{
	width: 60px;
	height: 60px;
	position: fixed;
	bottom:31%;
	right:6%;
	background-image: url("../../../static/img/ball.png");
	line-height:60px;
	text-align: center;
	background-repeat:round;
	font-family: Distillated;
	font-size: 20px;
}
#div_img
{
	width: 80px;
	height: 80px;
	position: fixed;
	bottom: 10%;
	right: 5%;
}
#div_box
{
	opacity: 0.9;
	border-radius: 7px;
	background-color: #fff;
	box-shadow: 1px 1px 10px 5px #DDD9CD ;
}
</style>
